<template>
    <div class="pd-30">
        <div class="flex">
            <div class="flex">
                <div class=" center">
                    <p>系统：</p>
                    <el-select class="w-260" v-model="value" placeholder="请选择">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class=" center ml-50">
                    <p>反馈内容：</p>
                    <el-input class="w-260" v-model="input" placeholder="请输入"></el-input>
                </div>

                <div class="flex ml-80">
                    <el-button class="w-100" @click="chongzhi">重置</el-button>
                    <el-button class="w-100" type="primary" plain @click="getUserList">搜索</el-button>
                </div>
            </div>

            <el-button class="w-100" type="primary" @click="addUser">新增</el-button>

        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="userName" label="反馈来源">
                <template #default="{ row }">
                    <p v-if="row.type == 1">家长端</p>
                    <p v-else-if="row.type == 2">教师端</p>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="反馈内容">
            </el-table-column>
            <el-table-column prop="states" label="状态">
                <template #default="{ row }">
                    <p v-if="row.status == 1">正常</p>
                    <p v-else>禁用</p>
                </template>
            </el-table-column>
            <el-table-column prop="submitTime" label="创建时间">
            </el-table-column>
            <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total"  @current-change="sizeChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {cusFeedbackList} from '@/api/configure.js'
export default {
    name: "Advertisement",
    data() {
        return {
            dialogVisible: false,
            options1: [{
                value: '',
                label: '全部'
            }, {
                value: '1',
                label: '家长端'
            }, {
                value: '2',
                label: '教师端'
            }],
            value:'',
            input: '',
            tableData: [],
            page:1,
            total: 0,
            upUrl:this.$upLoadUrl,
            type:''
        }
    },
    mounted(){
        this.getUserList()
    },
    methods: {
        sizeChange(e) {
            this.page = e
            this.getUserList()
        },
        addUser() {
            for (var i in this.form) {
                if(i != 'type'){
                    this.form[i] = ''
                }
            }
            this.dialogVisible = true
            this.type = 1
        },
        getUserList() {
            cusFeedbackList({
                pageNum: this.page,
                pageSize: 10,
                type: this.value,
                content: this.input
            }).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        submit(){
            var apiFunction = this.type == 1 ? addCusBanner : cusBannerEdit
            apiFunction(this.form).then(res => {
                if (res.code == 0) {
                    this.dialogVisible = false
                    this.getUserList()
                    this.$message({
                        message: this.type == 1 ? '添加成功' : '修改成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.msg || '失败');
                }
            })
        },


        chongzhi(){
            for (var i in this.form) {
                if(i != 'type'){
                    this.form[i] = ''
                }
            }
            this.getUserList()
        },

        handleEdit(e, type) {
            for (var i in this.form) {
                this.form[i] = type[i]
            }
            this.form.id = type.id
            this.dialogVisible = true
            this.type = 2
        },

        handleDelete(e, type) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
               
                removeCusBanner({ids: type.id}).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList()
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        
    }
}
</script>